<script setup>
import { EditPen , Tools ,Picture, Clock, Document } from '@element-plus/icons-vue';
import ImageUpload from './ImageUpload.vue';
import TextEditor from './TextEditor.vue';
import { saveOrUpdateCourse,getCourseById } from '@/api/courses';
import { setBlockTracking } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
    courseId:{
        default: "",
    }
})


//步骤条当前位置
const currentStep = ref(0)

//表单数据-课程信息
const course = ref({
    //课程的基本信息
    courseName: "",
    brief: "",
    teacherDTO:{
        teacherName: "",
        position: "",
        description: "",
    },
    //课程的封面信息
    previewFistField: "",
    previewSecondField: "",
    sortNum: 0,
    //课程图片
    courseListImg: '',
    courseImgUrl: "",
    //销售信息
    discounts: 0,
    price: 0,
    sales: 0,
    discountTag: "",
    //秒杀活动
    activityCourse:true,
    activityCourseDTO:{
      beginTime: "",
      endTime: "",
      amount: 0,
      stock: 0,
    //课程详情
    courseDescriptionMarkDown: "",
    status: 1,
    }
})


//秒杀活动的时间范围
const timeRange = ref()
//监听时间变化，存储到course
watch(timeRange,(newTime) => {
  if(Array.isArray(newTime)){
    course.value.activityCourseDTO.beginTime = newTime[0].toISOString()
    course.value.activityCourseDTO.endTime = newTime[1].toISOString()
    }else {
       course.value.activityCourseDTO.beginTime = ''
    course.value.activityCourseDTO.endTime = ''
    }
})
onMounted( async () => {
  if(props.courseId){
  const {data} =  await getCourseById(props.courseId)
   if(data.code === '000000'){
    course.value = data.data
    //如果有秒杀活动，设置时间范围
    if(course.value.activityCourse){
      timeRange.value = [
        //转化成date对象
      new Date  (data.data.activityCourseDTO.beginTime),
      new Date  (data.data.activityCourseDTO.endTime),
      ]}
   }
  }
})

//表单提交事件
const onSubmit = async () => {
  const info = props.courseId? '编辑课程' : '新建课程'
  const {data} = await saveOrUpdateCourse(course.value)
  if (data.code === '000000'){
    ElMessage.success(`${info}成功`)
    router.push({name: 'courses'})
  } else{
    ElMessage.error(`${info}失败`)
    throw new Error(`${info}失败`)
  }
  
}
//秒杀活动开关变化
const activityChange = (newValue) => {
  if(newValue && course.value.activityCourseDTO.amount === null){
    course.value.activityCourseDTO = {
      beginTime: "",
      endTime: "",
      amount: 0,
      stock: 0,
    }
  }
}
</script>

<template>
<el-page-header @back="$router.go(-1)">
 
      <template #content>
        <div class="flex items-center">
        <!--  有ID就是编辑课程 没ID就是新建课程 -->
          <span class="text-large font-600 mr-3"> {{ props.courseId? '编辑课程' : '新建课程' }} </span>
         
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
      
          <el-button type="primary" class="ml-2" @click="onSubmit">保存</el-button>
        </div>
      </template>

    
    </el-page-header>
      <el-card class="box-card">
    <template #header>
    <el-steps
    class="mb-4"
    :active="currentStep"
    :active-icon="true"
    :space="200"
    simple
  > 
 
    <el-step title="基本信息" :icon="EditPen" @click="currentStep = 0"/>
    <el-step title="课程封面" :icon="Picture" @click="currentStep = 1"/>
    <el-step title="销售信息" :icon="Tools" @click="currentStep = 2"/>
    <el-step title="秒杀活动" :icon="Clock" @click="currentStep = 3"/>
    <el-step title="课程详情" :icon="Document" @click="currentStep = 4"/>   
  </el-steps>
    </template>
   <el-form :model="course" label-width="100px" size="large" >
     <!-- 基本信息 -->
    <div v-show="currentStep === 0">
        <el-form-item label="课程名称" prop="courseName">
       <el-input v-model="course.courseName" maxlength="20" show-word-limit/>
        </el-form-item>
        <el-form-item label="简介" prop="courseName">
          <el-input v-model="course.brief" />
        </el-form-item>
        <el-form-item label="讲师姓名" prop="courseName">
          <el-input v-model="course.teacherDTO.teacherName" />
        </el-form-item>
        <el-form-item label="职位" prop="courseName">
          <el-input v-model="course.teacherDTO.position" />
        </el-form-item>
        <el-form-item label="讲师简介" prop="courseName">
            <el-input v-model="course.teacherDTO.description"  />
        </el-form-item>
        <el-form-item label="课程概述" prop="courseName">
            <el-input v-model="course.previewFistField"    style="flex:1;margin-right: 20px;"/>
            <el-input v-model="course.previewSecondField"  style="flex:1"/>
        </el-form-item>
        <el-form-item label="课程排序" prop="courseName">
            <el-input-number v-model="course.sortNum" min="0" controls-position="right" />
        </el-form-item>
    </div>
    <!-- 课程封面 -->
    <div v-show="currentStep === 1">
      <el-form-item label="展示图片">
        <ImageUpload v-model="course.courseListImg" />
  
      </el-form-item>
      <el-form-item label="解锁图片">
         <ImageUpload v-model="course.courseImgUrl" />
      </el-form-item>
        

    
    </div>
    <!-- 销售信息 -->
    <div v-show="currentStep === 2">
      <el-form-item label="售卖价格">
        <el-input-number v-model="course.price"min="0" controls-position="right" />
      </el-form-item>
      <el-form-item label="商品原价">
        <el-input-number v-model="course.discounts"min="0" controls-position="right" />
      </el-form-item>
      <el-form-item label="销量">
        <el-input-number v-model="course.sales"min="0" controls-position="right" />
      </el-form-item>
      <el-form-item label="活动标签">
        <el-input v-model="course.discountTag"/>
      </el-form-item>
    </div>
    <!-- 秒杀活动 -->
     <div v-show="currentStep === 3">
    <el-form-item label="限时秒杀">
      <el-switch
      v-model="course.activityCourse"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
      :active-value="true"
      :inactive-value="false"
      @change="activityChange"
      />
</el-form-item>
    <template v-if="course.activityCourse">
    <el-form-item  label="活动时间" style="width: 800px;">
  <el-date-picker
  v-model="timeRange"
  type="datetimerange"
  range-separator="至"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
  />
</el-form-item>
<el-form-item label="活动价格">
  <el-input-number v-model="course.activityCourseDTO.amount" min="0" controls-position="right" />
</el-form-item>
<el-form-item label="库存值">
  <el-input-number v-model="course.activityCourseDTO.stock" min="0" controls-position="right" />
</el-form-item>

   </template>
   </div>
    <!-- 课程详情 -->
    <div v-show="currentStep === 4">
        <el-form-item label="课程详情"></el-form-item>
        <TextEditor v-model="course.courseDescriptionMarkDown" />
         <el-form-item label="是否上架">
           <el-switch
      v-model="course.status"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
      :active-value="1"
      :inactive-value="0"
      />
         </el-form-item>
    </div>
    <div class="form-bottom-btn">
        <el-button v-show="currentStep !== 0" @click="currentStep--">上一步</el-button>
        <el-button v-show="currentStep !== 4" @click="currentStep++">下一步</el-button>
        <el-button v-show="currentStep === 4" type="primary"  @click="onSubmit">保存</el-button>
    </div>
   </el-form>
  </el-card>
</template>

<style scoped>
.el-steps {
  margin-bottom: 20px;
  width: auto;
}
.text {
  font-size: 14px;
}
.item{
    margin-bottom:18px
    
}
.box-card{
    width:auto;
    margin-top:17px;
}
.el-step {
    cursor: pointer;
}
.form-bottom-btn{
    display: flex;
   justify-content: center;
   align-items: center;
}
.el-form{
    padding: 0px 180px 0px 100px;
}

</style>


